.container {
  height: 5rem;

  &:hover {
    .input,
    .btn {
      border-color: #b0b0b0;
    }
  }

  &.focused {
    .input,
    .btn {
      border-color: var(--color-primary);
    }
  }

  .input {
    width: 25rem;
    height: 5rem;
    border: 0.1rem solid var(--color-border);
    font-size: 1.4rem;
    padding: 0 1rem;
    line-height: 5rem;
    transition: 0.3s;
  }

  .btn {
    width: 5rem;
    height: 5rem;
    margin-left: -0.1rem;
    border: 0.1rem solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #616161;
    cursor: pointer;
    transition: 0.3s;

    &:hover {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    .icon {
      font-size: 2.4rem;
    }
  }

  .recommend_list {
    width: 25rem;
    position: absolute;
    top: calc(100% - 0.1rem);
    left: 0;
    background-color: #fff;
    border: 0.1rem solid var(--color-primary);
    z-index: 8;

    .keyword_item {
      padding: 0.6rem 1.5rem;
      font-size: 1.2rem;
      color: #424242;
      cursor: pointer;

      &.active,
      &:hover {
        background-color: #fafafa;
      }
    }
  }
}
